<template>
  <div>
    <!-- 按钮组件button 
          type 类型   primary / success / warning / danger / info / text
          icon 图标类名 -->
    <el-button type="primary" icon="el-icon-plus" style="margin:10px 0px" @click="ShowdialogFormVisible">添加</el-button>
   
    <!-- 表单验证
                :model  表单数据对象
                :rules  表单验证规则 
                ref     获取当前实例 
    -->
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
      <!-- 点击添加 则弹出对话框
        el-dialog
                :visible 为false  则不弹出对话框
      -->
      <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <!-- el-form-item
              label      标签文本
              prop       传入 Form 组件的 model 中的字段 (必填)
       -->
        <el-form-item label="品牌名称" label-width="100px" style="width:450px" prop='tmName'>
            <!-- 双向绑定 Form 组件的 model 中的字段 -->
           <el-input autocomplete="off" v-model="ruleForm.tmName"></el-input>
        </el-form-item>

        <!-- el-form-item
              label      标签文本
              prop       传入 Form 组件的 model 中的字段 (必填)
       -->
        <el-form-item label="品牌LOGO" label-width="100px" prop="logoUrl">
          <!-- 上传图片 -->
              <!-- 上传图片组件
                el-upload
                  action上传的地址
                  show-file-list 是否显示已上传文件列表
                  on-success   文件上传成功时的钩子function(response, file, fileList)
                  before-upload  上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。  function(file) -->
              <el-upload
                  class="avatar-uploader"
                  action="http://39.98.123.211/admin/product/fileUpload"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  >
                  <!-- class='avater'  显示图片的边框 -->
              <img v-if="ruleForm.logoUrl" :src="ruleForm.logoUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <div slot="footer" class="dialog-footer">
            <el-form-item>
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
            </el-form-item>
        </div>
        </el-dialog>
      </el-form>
       <!-- <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div> -->

    <!-- 表格组件table
            border  是否带有纵向边框
            :data  显示的数据   -->
    <el-table style="width: 100%" border :data="records" >
      <!-- table-column 
          type    参数（selection/index/expand）
              设置了 selection 则显示多选框     
              设置了 index 则显示该行的索引（从 1 开始计算）   
              设置了 expand 则显示为一个可展开的按钮
          label    显示的标题
          algin    	对齐方式
          prop     对应列内容的字段名(table里data的数据) -->
      <el-table-column type="index" width="80px" label="序号" align='center' prop="id"> </el-table-column>
      <el-table-column  label="品牌名称" align='center' prop="tmName"> </el-table-column>
      <el-table-column  label="品牌LOGO" align='center' prop=""> 
        <!-- 使用作用域插值(el-slot)
            {row,$index} 
                row 为table的data数据  
                $index 为索引（从0开始） -->
          <template slot-scope="{row,$index}">
            <img :src="row.logoUrl" alt="" style="width:100px;height:100px">
          </template>
      </el-table-column>
      <!-- 使用作用域插值(el-slot)
            {row,$index} 
                row 为table的data数据  
                $index 为索引（从0开始） -->
      <el-table-column  label="操作" align='center' prop="">
        <template slot-scope="{row}">
          <!-- size  为大小 -->
          <!-- row 为当前点击对象 -->
          <el-button type="warning" icon="el-icon-edit" size='mini' @click="TrademarkUpdate(row)" >修改</el-button>
          <el-button type="danger" icon="el-icon-delete" size='mini' @click="TrademarkRemove(row)" >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

      <!-- 分页器组件  pagination
          :current-page    当前页码  
          :pager-count  连续页面数   默认为7（包括开头与结尾）
          :total   总条数
          :page-size   每页显示多少个数据  
          :page-sizes   每页显示个数选择器的选项设置(数组)
          layout  子组件
                    prev   上一页
                    pager   页码数
                    next    下一页
                    jumper   前往第几页  输入框
                    sizes   选择显示多少个数据
                    total   总条数
                ->    可以把组件放在最右边(没有  <-   )
        @current-change 
                        点击页码（包括jumper组件的数据  包括上一页与下一页） 返回参数（当前点击的页面）
        @size-change
                      返回选择了多少条数据（每页显示多少条数据） -->
   <el-pagination
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :current-page="trademark.current"
      :page-sizes="[5,100, 200, 300, 400]"
      :page-size="trademark.size"
      :pager-count='7'
      layout="prev,pager, next, jumper,->,sizes,total"
      :total="trademark.total"
      style="margin-top:20px;textAlign:center"
      >
      <!-- textAlign:center   居中 -->
    </el-pagination>
    
  </div>
</template>

<script>
export default {
  name: "TradeMark",
  data() {

    // tmName的验证规则
     var validatetmName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入品牌名称'));
        } else {
          callback();
        }
      };
      // logoUrl的验证规则
      var validatelogoUrl =  (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请上传图片'));
        } else {
          callback();
        }
      };

    return {
      // 当前页码
      page:1,
      //展示多少条数据
      limit:5,
      //接收接口返回的数据中的展示数据
      records:[],
      //接收接口返回的所有有用数据
      trademark:{},
      // 是否显示弹出对话框
      dialogFormVisible:false,
      // 显示添加与修改标题变量
      title:'',
      // Form表单里验证属性
      ruleForm:{
        id:'',    //品牌id
        tmName:'',//品牌名称
        logoUrl:''//品牌LOGO
      },
      // 表单验证规则
          // blur 移出
      rules: {
          tmName: [
            // required: true   表示必填项    在属性前面会出现星号
            { validator: validatetmName, trigger: 'blur', required: true }
          ],
          logoUrl: [
            { validator: validatelogoUrl, trigger: 'blur', required: true }
          ],
      }
    }
  },
  mounted() {
    // 调用分页列表接口
    this.GetbaseTrademark()
  },
  methods: {

    // 请求分页列表接口
   async GetbaseTrademark(){
    //  结构赋值 获取当前页 与 展示多少条数据
      let {page,limit} = this
      // 接收返回的接口数据
      let result =  await this.$API.trademark.baseTrademark(page,limit)
      // 如果返回的数据成功则执行该语句
      if(result.code == 200){
        // 把接收的数据 赋值给总数据对象
        this.trademark = result.data
        // 把接收的展示数据  赋值给展示数据
        this.records = result.data.records
      }else{
        // 如果出现错误 可能是接口问题或者是参数问题
        console.log("接口与参数出现问题");
      }

    },

    // 点击的页码数方法与输入的页码数（包括上一页与下一页）
    handleCurrentChange(index){

      // 如果点击了 则把当前的点击的数据 赋值给当前页
      this.page = index;

      // 重新发送请求
       this.GetbaseTrademark()
    },

    //选择 选择的多少条数据 方法（可以接收选择了多少条数据）
    handleSizeChange(limit){

      // 把接收的选择了多少条的数据 赋值展示多少条数据
      this.limit = limit

      //重新发请求
      this.GetbaseTrademark()
    },

    // 点击添加则弹出对话框  方法
    ShowdialogFormVisible(){

      // 如果点击了添加则把标题设置为添加品牌
      this.title='添加品牌'

      // 深拷贝  把ruleForm数据清空  
      // 因为如果再次点击添加  则会继续显示之前的数据
      Object.assign(this.ruleForm,{tmName:'',logoUrl:''})

      // 显示弹出对话框 
      this.dialogFormVisible = true
    },

    // 图片文件上传成功方法
      // 参数：response 获取返回成功的数据
      //      file获取图片的所有数据（包括成功的）
    handleAvatarSuccess(response, file){
      // 如果上传图片成功
      if(response.code==200){
        // 把获取的数据 赋值给form的logUrl
        this.ruleForm.logoUrl = response.data
      }else{
        this.$message.error('数据接口错误');
      }
    },
    // 上传文件之前方法  验证图片规则
    // beforeAvatarUpload(file) {
    //     const isJPG = file.type === 'image/jpeg';
    //     const isLt2M = file.size / 1024 / 1024 < 2;

    //     if (!isJPG) {
    //       this.$message.error('上传头像图片只能是 JPG 格式!');
    //     }
    //     if (!isLt2M) {
    //       this.$message.error('上传头像图片大小不能超过 2MB!');
    //     }
    //     return isJPG && isLt2M;
    // },

    // 验证规则方法  传入From实例
    submitForm(formName) {
      // 验证规则是不是都没有问题  
                // valid  如果都没有问题则为true
                //         如果有问题 则false
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            // 定义接收接口返回参数
            let result
            // 如果有id 则说明为修改品牌  没有则为添加品牌
            if(this.ruleForm.id){
              // 发送修改品牌请求
               result =  await this.$API.trademark.baseTrademarkUpdate(this.ruleForm)
              //  发送完把id清空  因为如果不清空则下一次会带id
               this.ruleForm.id = ''
            }else{
              //发送添加品牌请求
               result =  await this.$API.trademark.baseTrademarkSave(this.ruleForm)
            }
            if(result.code == 200){
               this.$message({
                message: `${this.title}成功`,
                type: 'success'
              });
            }
            // 如果成功则关闭对话框
            this.dialogFormVisible = false
            // 重新发送请求
            this.GetbaseTrademark()
          } else {
              this.$message.error( `${this.title}失败`);
            return false;
          }
        });
    },

      // 修改品牌方法
    async TrademarkUpdate(trademar){
        // 把title设置为修改品牌
        this.title='修改品牌'
        // 把form的属性清空
        Object.assign(this.ruleForm,{tmName:'',logoUrl:''})
        // 显示对话框
        this.dialogFormVisible = true
        // 保存点击修改的品牌 id
        this.ruleForm.id= trademar.id
    },

      // 删除商品方法
    TrademarkRemove(trademar){
        // 弹框
        this.$confirm(`你确定要删除${trademar.tmName}吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          // 发送删除品牌接口
            let result = await this.$API.trademark.baseTrademarkRemove(trademar.id)
            if(result.code==200){
               this.$message({
                type: 'success',
                message: '删除成功!'
              });
              if (this.records.length <= 1) {
                this.page = this.page - 1
              }
              this.GetbaseTrademark()
            }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    }
  },
};
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>